<template>
  <view class="whole">
    <view class="information_top">
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="headportrait" @click="toPersonalCenter">
        <text>个人中心</text>
        <view style="display: flex; align-items: center">
          <!-- <text style="margin: 0 10rpx">{{
            userinfo ? userinfo.account : "1234566586545"
          }}</text> -->
          <image
            src="/static/jiantou.png"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
          ></image>
        </view>
      </view>

      <!-- <view class="headportrait" @click="changeAvatar(1)">
        <text>更换头像</text>
        <view style="display: flex; align-items: center">
          <image
            :src="user_img"
            style="
              width: 80rpx;
              height: 80rpx;
              margin: 0 20rpx;
              border-radius: 45rpx;
            "
            mode="scaleToFill"
            v-if="user_img != null"
          ></image>
          <image
            :src="userinfo.avatar"
            style="
              width: 80rpx;
              height: 80rpx;
              margin: 0 20rpx;
              border-radius: 45rpx;
            "
            mode="scaleToFill"
            v-else-if="userinfo.avatar != null"
          ></image>
          <image
            src="/static/default-avatar.png"
            style="width: 80rpx; height: 80rpx; margin: 0 20rpx"
            mode="scaleToFill"
            v-else
          ></image>
          <image
            src="/static/jiantou.png"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
          ></image>
        </view>
      </view> -->

      <!-- <u-upload :custom-btn="true">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" mode="scaleToFill" >
					<image  src="/static/default-avatar.png" style="width: 80rpx;height: 80rpx;margin: 0 20rpx;" mode="scaleToFill"></image>
				</view>
			</u-upload> -->

      <!-- <view style="height: 2rpx;background-color: #262934;margin: 0  30rpx;"></view>
			<view class="headportrait">
				<text>ID</text>
				<text>{{userinfo?userinfo.id:'586545'}}</text>
			</view> -->

      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="headportrait" @click="tophone">
        <text>手机号</text>
        <view style="display: flex; align-items: center">
          <text style="margin: 0 10rpx">{{
            userinfo ? userinfo.account : "1234566586545"
          }}</text>
          <image
            src="/static/jiantou.png"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
          ></image>
        </view>
      </view>

      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="headportrait" @click="torealname">
        <text>实名认证</text>
        <view>
          <text>{{
            userinfo
              ? userinfo.is_certification == 1
                ? userinfo.certification_log.id_card_name
                : ""
              : ""
          }}</text>
          <text
            style="
              border: 2rpx solid #fbda96;
              padding: 4rpx 15rpx;
              margin-left: 20rpx;
              color: #fbda96;
              border-radius: 8rpx;
            "
          >
            {{
              userinfo
                ? userinfo.is_certification == 1 ||
                  userinfo.certification_log != null
                  ? "已认证"
                  : "未认证"
                : "未认证"
            }}</text
          >
        </view>
      </view>
    </view>
    <view class="information_center">
      <block v-for="(item, index) in bottom" :key="index">
        <view class="information_center_item" @click="tomodify(item.path)">
          <text>{{ item.name }}</text>
          <image
            :src="item.img"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
          ></image>
        </view>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>
      </block>
    </view>

    <view class="information_center">
      <block v-for="(item, index) in information_center" :key="index">
        <view class="information_center_item" @click="tomodify(item.path)">
          <text>{{ item.name }}</text>
          <image
            :src="item.img"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
            v-if="index != 2"
          ></image>
          <text v-else>{{ version }}</text>
        </view>
        <view
          style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
        ></view>
      </block>
    </view>
    <u-modal
      v-model="show"
      :content="content"
      @confirm="confirm"
      @cancel="cancel"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import api from "../../api/api";
import { uploadImage } from "../../utils/upLoad.js";
import { version } from "@/utils/request.js";
export default {
  data() {
    return {
      version: version,
      show: false,
      content: "请确定是否退出登录",
      user_img: null,
      userinfo: null,
      bottom: [
        {
          name: "修改密码",
          img: "/static/jiantou.png",
          path: "../change_password/change_password",
        },
        {
          name: "交易密码",
          img: "/static/jiantou.png",
          path: "../forget_trading/forget_trading",
        },

        // {
        //   name: "邀请人数",
        //   img: "/static/jiantou.png",
        //   path: "../invitation_people/invitation_people",
        // },
        {
          name: "转赠记录",
          img: "/static/jiantou.png",
          path: "../Transfer_record/Transfer_record",
        },
        // {
        //   name: "银行卡",
        //   img: "/static/jiantou.png",
        //   path: "../bankcardlist/bankcardlist",
        // },
        // {
        //   name: "快捷支付",
        //   img: "/static/jiantou.png",
        //   path: "../fastPay/fastPay",
        // },
        // {
        //   name: "申请成为挂售商家",
        //   img: "/static/jiantou.png",
        //   path: "../becomeMerchant/becomeMerchant",
        // },
      ],
      information_center: [
        {
          name: "关于我们",
          img: "/static/jiantou.png",
          path: `../aboutus/aboutus?key=${"about_us"}`,
        },
        {
          name: "意见反馈",
          img: "/static/jiantou.png",
          path: "../feedback/feedback",
        },
        {
          name: "版本号",
          img: "/static/jiantou.png",
          path: "1",
        },
        {
          name: "退出登录",
          img: "/static/jiantou.png",
          path: "",
        },
      ],
    };
  },
  onLoad() {},
  onShow() {
    this.userinfo = uni.getStorageSync("userInfo");
    // this.getDetail();
  },
  methods: {
    toPersonalCenter() {
      uni.navigateTo({
        url: "../personalCenter/personalCenter",
      });
    },
    async getDetail() {
      let res = await api.userMerchantDetail({
        method: "get",
        query: {},
      });

      if (res.code == 0) {
        // 1审核中，2成功，3失败
        this.review_state = res.data ? res.data.examine_status : false;
      } else {
        tip.defaults(res.msg);
      }
    },

    async changeAvatar() {
      let res = await uploadImage();
      console.log(res, "res");
      if (res != "") {
        let resa = await api.store({
          query: {
            avatar: res[0],
            nickname: this.userinfo.nickname,
          },
          method: "post",
        });
        console.log(resa, "resa");
        if (resa.code == 0) {
          this.user_img = res[0];
          let info = await api.info({});
          uni.setStorageSync("userInfo", info.data);
        }
        // uni.setStorageSync('userInfo', res.data)
      }
    },
    tomodify(url, type) {
      // if (type == "merchant" && this.review_state == "2") {
      //   uni.navigateTo({
      //     url: "../MerchantDetail/MerchantDetail",
      //   });
      //   return;
      // }

      if (url == "") {
        this.show = true;
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
    tophone() {
      uni.navigateTo({
        url: "../new_phone/new_phone",
      });
    },
    torealname() {
      if (
        this.userinfo.is_certification == 1 ||
        this.userinfo.certification_log != null
      ) {
        return;
      }
      uni.navigateTo({
        url: "../real_name/real_name",
      });
    },
    cancel() {
      this.show = false;
    },
    confirm() {
      uni.clearStorageSync();
      setTimeout(() => {
        uni.navigateBack({
          delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
          // success: function() {undefined
          // let page = getCurrentPages().pop(); //跳转页面成功之后
          // if (!page) return ;
          // page.onLoad(); //如果页面存在，则重新刷新页面
          // },
        });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: calc(100vh - 44px);
}
.slot-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 90rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}
.information_top {
  border: 2rpx solid #262934;
  margin: 0 30rpx;
  background-color: $bg-color3;
  border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.headportrait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 60rpx;
}
.information_center {
  font-size: 28rpx;
  position: relative;
  top: 50rpx;
  color: #ffffff;
  border: 2rpx solid #262934;
  border-radius: 25rpx;
  margin: 30rpx;
  background-color: $bg-color3;
}
.information_center_item {
  /* padding: 20rpx 0  0 ;
		min-height: 80rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		display: flex;
		justify-content: space-between; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 60rpx;
}
span:first-child {
  font-size: 28rpx;
}
</style>
